<template>
  <div class="app-container detail">
    <el-row class="headline">
      <el-col :span="3">
        <span>提前还款</span>
      </el-col>
      <el-col :span="9" :offset="7">
        <el-steps align-center :space="100">
          <el-step title="初审" class="stepActive" />
          <el-step title="复审" class="stepActive" />
          <el-step title="终审" class="stepActive" />
          <el-step title="放款" class="stepActive" />
          <el-step title="还款" class="stepActive" />
          <el-step title="完成" />
        </el-steps>
      </el-col>
      <el-col :span="1" :offset="1">
        <el-button size="small" :icon="Printer" v-print="printObj" @click="upadtaPrintStatus">打印</el-button>
      </el-col>
      <el-col :span="1" :offset="1">
        <el-button size="small" @click="goBack" :icon="ArrowLeft">返回</el-button>
      </el-col>
    </el-row>
    <div ref="printTest" id="printTest">
      <div class="info-title">（客户【{{ customerName }}】提前还款{{ payDetail.status == "1" ? "办理" : "确认" }}）</div>
      <el-row justify="center">
        <el-col :span="23">
          <el-table :data="cutomerList" border>
            <el-table-column label="期限" align="center" key="stages_phase" prop="stages_phase" />
            <el-table-column label="应还款日" align="center" key="pmt_due_date" prop="pmt_due_date" width="100px" />
            <el-table-column label="实际还款日" align="center" key="grace_date" prop="grace_date" width="100px">
              <template #default="scope">
                <el-input v-if="scope.row.status == '未提交' && !payDetail.type && payDetail.status == '1'" v-model="scope.row.submit_str" style="width: 80px" />
                <div>{{ scope.row.grace_date }}</div>
                <div v-show="scope.row.early_cost > 0">提前还款费{{ scope.row.early_cost }}</div>
              </template>
            </el-table-column>
            <el-table-column label="本金" align="center" key="ctd_principal_amt" prop="ctd_principal_amt" />
            <el-table-column label="利息" align="center" key="ctd_interesta_amt" prop="ctd_interesta_amt" />
            <el-table-column label="管理费" align="center" key="manage_amt" prop="manage_amt" />
            <el-table-column label="罚息" align="center" key="interest_penalty" prop="interest_penalty" />
            <el-table-column label="变更费" align="center" key="change_fee" prop="change_fee" />
            <el-table-column label="提前还款费" align="center" key="early_cost" prop="early_cost" />
            <el-table-column label="还款总额" align="center" key="stages_amount" prop="stages_amount" />
            <el-table-column label="状态" align="center" key="status" prop="status" />
            <el-table-column label="逾期天数" align="center" key="overdue_days" prop="overdue_days" />
            <el-table-column label="罚息减免" align="center" key="reduction_amt" prop="reduction_amt" />
            <el-table-column label="备注" align="center" key="submit_str" prop="submit_str" />
            <el-table-column v-if="!formShow" label="提交人" align="center" key="submitter_name" prop="submitter_name" />
            <el-table-column v-if="!formShow" label="提交时间" align="center" key="submit_time" prop="submit_time" />
            <el-table-column v-if="!formShow" label="审核" align="center" key="review_result" prop="review_result">
              <template #default="scope">
                <div>{{ scope.row.review_result }}</div>
              </template>
            </el-table-column>
            <el-table-column label="财务备注" align="center" key="review_str" prop="review_str" />
          </el-table>
        </el-col>
      </el-row>
      <el-row justify="center" style="margin-top: 30px" v-if="formShow">
        <el-col :span="16" style="border: 1px solid #fafafa">
          <el-form :disabled="viewDisabled" :model="refundForm" :rules="rulest" ref="refundFromRef" label-width="140px">
            <el-row>
              <el-col :span="8">
                <el-form-item label="提前还款方式：" prop="repay_type">
                  <el-select :disabled="payDetail.status == '2'" v-model="refundForm.repay_type" placeholder="请选择提前还款方式" clearable style="width: 293px">
                    <el-option label="全部提前结清" value="1"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="期数：" prop="stages">
                  <el-input v-model="refundForm.stages" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="提前还款总额：" prop="amount">
                  <el-input readonly v-model="refundForm.amount"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="提前还款费：" prop="cost">
                  <el-input :disabled="payDetail.status == '2'" v-model="refundForm.cost" @input="payChange" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="实际还款日期：" prop="repay_date">
                  <el-date-picker :disabled="payDetail.status == '2'" value-format="YYYY-MM-DD" range-separator="-" v-model="refundForm.repay_date" type="date" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="是否收取剩余利息：" prop="interest">
                  <el-radio-group :disabled="payDetail.status == '2'" @change="channelChange" v-model="refundForm.interest">
                    <el-radio label="1">是</el-radio>
                    <el-radio label="0">否</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="收取金额：" prop="interest_amount">
                  <el-input :disabled="refundForm.interest == '0' || payDetail.status == '2'" @input="onlyNumber" v-model="refundForm.interest_amount"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col>
                <el-form-item label="备注：" prop="notes">
                  <el-input :disabled="payDetail.status == '2'" v-model="refundForm.notes" type="textarea" rows="5"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row v-if="!payDetail.type && payDetail.status == '2'">
              <el-col :span="8">
                <el-form-item label="审核：" prop="review">
                  <el-radio-group v-model="refundForm.review">
                    <el-radio label="1">已还款</el-radio>
                    <el-radio label="2">驳回</el-radio>
                  </el-radio-group>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row v-if="!payDetail.type && payDetail.status == '2'">
              <el-col>
                <el-form-item label="备注：" prop="review_notes">
                  <el-input v-model="refundForm.review_notes" type="textarea" rows="5"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <el-row justify="center" v-if="!viewDisabled">
            <el-col :span="8">
              <el-button type="primary" @click="handlePay">提交确认</el-button>
              <el-button @click="goBack">返回</el-button>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row justify="center">
        <el-col :span="16">
          <div style="margin-top: 20px">
            <TabAcross title="担保信息" :list="loanList"></TabAcross>
            <TabAcross title="费用信息" :list="costList"></TabAcross>
            <TabAcross title="银行信息" :list="bankList"></TabAcross>
          </div>
        </el-col>
      </el-row>
    </div>
    <el-dialog title="提前还款确认" v-model="aduitShow" width="460px" append-to-body>
      <el-form :model="aduitForm" :rules="rulest" ref="aduitFromRef" label-width="160px">
        <el-row>
          <el-col :span="20" class="affrim">
            <el-form-item label="提前还款方式：" prop="deptId">
              <div class="input-sumbit">全部提前结清</div>
            </el-form-item>
            <el-form-item label="提前还款总额：" prop="amount">
              <div class="input-sumbit">{{ aduitForm.amount }}元</div>
            </el-form-item>
            <el-form-item label="提前还款费用：" prop="cost">
              <div class="input-sumbit">{{ aduitForm.cost }}元</div>
            </el-form-item>
            <el-form-item label="提前还款期数剩余：" prop="stages">
              <div class="input-sumbit">{{ aduitForm.stages }}期</div>
            </el-form-item>
            <el-form-item label="提前还款利息：" prop="interest_amount">
              <div class="input-sumbit">{{ aduitForm.interest_amount }}元</div>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitFileForm">确 定</el-button>
          <el-button @click="aduitShow = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup name="Manage">
import { ArrowLeft, Printer } from "@element-plus/icons-vue";
import { onActivated, reactive } from "vue";
import TabAcross from "@/components/TabAcross";
import { loanEarlyRepay, bankCardDetail, loanEarlyRepayEntry, loanEarlyRepayConfirm } from "@/api/afterLoan/index";
const { proxy } = getCurrentInstance();
const route = useRoute();
const router = useRouter();
const customerName = ref("");
const formShow = ref(true);
const aduitShow = ref(false);
const viewDisabled = ref(true);
const payDetail = ref({
  status: "1",
  type: true,
});
const cutomerList = ref([]);
const loanList = ref();
const costList = ref([
  [
    { title: "保证金率：", value: "15%" },
    { title: "服务费：", value: "0.0%" },
  ],
  [
    { title: "年化率：", value: "14.0%" },
    { title: "担保费：", value: "0.0%" },
  ],
  [
    { title: "提前还款：", value: "0.0%" },
    { title: "月利息：", value: "1.25%" },
  ],
  [
    { title: "月管理费", value: "0.25%" },
    { title: "滞纳金：", value: "0.25%" },
  ],
]);
const bankList = ref([]);
const data = reactive({
  aduitForm: {},
  customerInfos: {
    user_name: "",
    loan_type_classify: "",
    loan_type_name: "",
    loan_stages: "",
    apply_quota: "",
    method_type: "",
    contract_amount: "",
    approval_amount: "",
    purpose_name: "",
    approval_rate: "",
  },
  refundForm: {
    repay_type: "1",
    stages: undefined,
    amount: undefined,
    cost: undefined,
    repay_date: undefined,
    interest: "1",
    interest_amount: undefined,
    notes: undefined,
    review: undefined,
    review_notes: undefined,
    apply_id: undefined,
    stages_phase: undefined,
    id: undefined,
  },
  rulest: {
    review: [{ required: true, message: "请选择审核结论", trigger: "change" }],
    repay_date: [{ required: true, message: "请选择审核结论", trigger: "change" }],
  },
});
const { refundForm, customerInfos, aduitForm, rulest } = toRefs(data);
/** 获取详细信息*/
function getInfos() {
  customerInfos.value = { ...history.state.infos };
  customerName.value = history.state.infos.user_name;
  payDetail.value.status = history.state.infos.status;
  payDetail.value.type = JSON.parse(history.state.infos.type);
  loanList.value = [
    [
      { title: "客户姓名：", value: customerInfos.value.user_name, link: "客户资料档案" },
      { title: "", value: "" },
    ],
    [
      { title: "担保性质：", value: customerInfos.value.loan_type_classify },
      { title: "担保类型：", value: customerInfos.value.loan_type_name },
    ],
    [
      { title: "担保用途：", value: customerInfos.value.purpose_name },
      { title: "还款方式：", value: customerInfos.value.method_type },
    ],
    [
      { title: "担保期限：", value: customerInfos.value.loan_stages },
      { title: "申请金额：", value: customerInfos.value.apply_quota },
    ],
    [
      { title: "审批金额：", value: customerInfos.value.approval_amount },
      { title: "合同金额：", value: customerInfos.value.contract_amount },
    ],
  ];

  costList.value = [
    [
      { title: "综合利率：", value: customerInfos.value.approval_rate },
      { title: "服务费：", value: "0.0（0.00元）" },
    ],
    [{ title: "管理费：", value: "0.0% （每月0.00元）" }],
  ];
  if (payDetail.value.type) {
    viewDisabled.value = true;
    if (payDetail.value.status == "2") {
      formShow.value = false;
    } else {
      formShow.value = true;
    }
  } else {
    formShow.value = true;
    viewDisabled.value = false;
  }
}
function onlyNumber() {
  refundForm.value.interest_amount = onlyNumOnePoint(refundForm.value.interest_amount);
}
function payChange() {
  refundForm.value.cost = onlyNumOnePoint(refundForm.value.cost);
}
function channelChange() {
  console.log(refundForm.value.interest);
  if (refundForm.value.interest == "0") {
    refundForm.value.interest_amount = "";
  }
}
function onlyNumOnePoint(number_only) {
  //先把非数字的都替换掉，除了数字和小数点
  number_only = number_only.replace(/[^\d.]/g, "");
  //必须保证第一个为数字而不是小数点
  number_only = number_only.replace(/^\./g, "");
  //保证只有出现一个小数点而没有多个小数点
  number_only = number_only.replace(/\.{2,}/g, ".");
  //保证小数点只出现一次，而不能出现两次以上
  number_only = number_only.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
  //保证只能输入两个小数
  number_only = number_only.replace(/^(\-)*(\d+)\.(\d\d).*$/, "$1$2.$3");
  return number_only;
}
function upadtaPrintStatus() {}
/**获取银行卡信息*/
function getBankCardInfo() {
  bankCardDetail(history.state.infos.debit_card_id).then((res) => {
    console.log(res, "银行卡");
    bankList.value = [
      [
        { title: "开户行：", value: res.data.bankName },
        { title: "户名：", value: history.state.infos.user_name },
      ],
      [
        { title: "开户地：", value: res.data.openingBranch },
        { title: "支行名称：", value: res.data.openingBranch },
      ],
      [{ title: "银行帐号：", value: res.data.cardNo }],
    ];
  });
}
function submitFileForm() {
  if (payDetail.value.status == "1") {
    loanEarlyRepayEntry({
      ...refundForm.value,
      repay_date: refundForm.value.repay_date + "  00:00:00",
    }).then((res) => {
      proxy.$modal.msgSuccess("成功");
      aduitShow.value = false;
      viewDisabled.value = true;
    });
  } else {
    loanEarlyRepayConfirm({
      ...refundForm.value,
      repay_date: refundForm.value.repay_date + "  00:00:00",
    }).then((res) => {
      proxy.$modal.msgSuccess("成功");
      aduitShow.value = false;
      viewDisabled.value = true;
      formShow.value = false;
    });
  }
}
let printObj = reactive({
  id: "printTest", //绑定打印区域id
  popTitle: "", //内容标签
  beforeOpenCallback(vue) {
    console.log("打开之前");
  },
  //调用打印工具成功回调函数
  openCallback(vue) {
    console.log("执行了打印");
  },
  //关闭打印机的回调
  closeCallback(vue) {
    console.log("关闭了打印工具");
  },
});
/** 返回 */
function goBack() {
  proxy.$tab.closeOpenPage("refund");
}
/**提交，确认*/
function handlePay() {
  proxy.$refs["refundFromRef"].validate((valid) => {
    console.log();
    if (valid) {
      if (refundForm.value.interest == "1" && !refundForm.value.interest_amount) {
        return proxy.$modal.msgError("请填写收取金额");
      }
      aduitShow.value = true;
      aduitForm.value = { ...refundForm.value };
    }
  });
}
function viewDetail() {
  loanEarlyRepay(history.state.infos.id).then((res) => {
    cutomerList.value = res.data.list.map((item) => {
      item.pmt_due_date = item.pmt_due_date.slice(0, 10);
      item.grace_date = item.grace_date?.slice(0, 10);
      return item;
    });
    refundForm.value = res.data.data;
    // refundForm.value.stages_phase = res.data.data.stages_phase;
    // refundForm.value.apply_id = res.data.data.apply_id;
    // refundForm.value.amount= res.data.data.amount;
    // refundForm.value.stages= res.data.data.stages;
    // refundForm.value.cost = res.data.data.cost;
    // refundForm.value.repay_date = res.data.data.repay_date?res.data.data.repay_date.slice(0,10):'';
    // refundForm.value.interest= res.data.data.interest?res.data.data.interest:'1';
    // refundForm.value.interest_amount = res.data.data.interest_amount;
    // refundForm.value.notes = res.data.data.notes;
    if (payDetail.value.status == "2") {
      refundForm.value.review = "";
      refundForm.value.review_notes = res.data.data.review_notes;
      refundForm.value.id = res.data.data.id;
    }
  });
}
onActivated(() => {
  getInfos();
  viewDetail();
  getBankCardInfo();
});
</script>
<style lang="scss" scoped>
.info-title {
  line-height: 72px;
  text-align: center;
}
.detail {
  overflow: hidden;
}
.detail:deep(.el-step__line) {
  background: #fff;
  opacity: 0;
}
:deep(.el-step__icon.is-text) {
  border: 1px solid;
}
:deep(.el-step__icon) {
  height: 14px;
  width: 14px;
}
:deep(.el-steps) {
  background: #f2f2f2;
  margin-top: 3px;
}
:deep(.el-step.is-horizontal) {
  display: flex;
  padding-right: 5px;
}
:deep(.el-step__title) {
  line-height: 20px;
}
:deep(.el-step__main) {
  white-space: nowrap;
}
:deep(.el-step__head.is-finish) {
  color: #333;
  border-color: #333;
}
:deep(.el-step__title.is-finish) {
  color: #333;
}
:deep(.el-step__head.is-wait) {
  color: #333;
  border-color: #333;
}
:deep(.el-step__title.is-wait) {
  color: #333;
}
:deep(.el-step__title.is-process) {
  color: #333;
  font-weight: 400;
}
:deep(.el-step__head.is-process) {
  font-weight: none;
  color: #333;
  border-color: #333;
}
.affrim {
  :deep(.el-form .el-form-item__label) {
    font-weight: normal;
  }
}
.stepActive {
  background: black;
  :deep(.el-step__title) {
    line-height: 20px;
  }
  :deep(.el-step__title.is-finish) {
    color: #fff;
  }
  :deep(.el-step__title.is-wait) {
    color: #fff;
  }
  :deep(.el-step__title.is-process) {
    color: #fff;
    font-weight: 400;
  }
}
.input-sumbit {
  font-weight: bold;
}
</style>
